import React from "react";
import { getAbout } from "../../../lib/data";
import { BannerCarousel } from "../../../components/BannerCarousel";

export const revalidate = 300;

export default function AboutPage({ params }: { params: { locale: string } }) {
  const locale = params.locale;
  const data = getAbout(locale);
  return (
    <div className="space-y-10">
      <section className="mt-6">
        <div className="mx-auto max-w-screen-2xl px-4">
          <BannerCarousel items={data.banners as any} basePath={`/${locale}`} aspectClass="aspect-[16/6]" />
        </div>
      </section>
      <section>
        <div className="mx-auto max-w-screen-lg px-4">
          <h1 className="text-2xl font-semibold mb-3">{data.intro.title}</h1>
          <p className="text-gray-700 leading-7">{data.intro.content}</p>
        </div>
      </section>
    </div>
  );
}